<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '学生阅读完成情况',
	},
}
</route>
<template>
	<view class="page-class">
		<view index="14" class="block-4">
			<view class="beiyueDetailsBox">
				<view class="w-full flex justify-between items-center">
					<view class="flex justify-between items-center">
						<image
							class="w-[105rpx] h-[105rpx] rounded-[50%] mr-1"
							:src="studentReadInfo.student_avatar || baseImg + '/tabbar/myS.png'"
						></image>
						<view class="flex flex-col">
							<text class="text-[#303030] text-[29rpx]">{{ studentReadInfo.student_name }}</text>
							<view class="flex items-center">
								<text class="text-[22rpx] text-[#ABABAB]"
									>{{ studentReadInfo.school_name }} / {{ studentReadInfo.grade }} /
									{{ studentReadInfo.class }}</text
								>
							</view>
						</view>
					</view>
					<view class="flex justify-end items-center">
						<view class="flex flex-col justify-between">
							<view index="32" class="wrapper-4">
								<text index="27" class="title-5">{{ parseInt(studentReadInfo.progress) }}%</text>
								<text index="28" class="caption-2">完成率</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="planTitle">
			<view class="planTitleTex">{{ studentReadInfo.plan_title }}</view>
		</view>
		<view
			class="bg-white rounded-[30rpx] px-4 py-4 box-border w-[700rpx] ml-[25rpx] flex justify-between items-center mb-4"
			style="display: inline-block; float: left"
			v-for="(item, index) in studyBookList"
		>
			<view class="w-[100%]" style="float: left">
				<image
					class="w-[180rpx] h-[220rpx] rounded-[30rpx]"
					style="float: left"
					:src="item.cover_img || baseImg + '/img-shangcixuedao.png'"
				></image>
				<view class="flex-1 pl-2 py-2 h-[220rpx] box-border flex flex-col justify-between">
					<view class="w-full flex flex-col">
						<text class="text-[33rpx] font-bold text-[#303030]">{{ item.name }}</text>
						<text class="text-[22rpx] text-[#303030] mt-1">{{ item.author }} 编著</text>
					</view>
					<view class="w-full flex justify-between items-center">
						<view class="flex items-center">
							<view
								class="w-[153rpx] flex flex-col items-start justify-center"
								v-if="item.progress == 0"
							>
								<text class="text-[#2BA5E0] text-[21rpx]">未开始学习</text>
							</view>
							<view
								class="w-[153rpx] flex flex-col items-start justify-center"
								v-else-if="item.progress > 0 && item.progress < 100"
							>
								<text class="text-[#48C855] text-[21rpx]"
									>学习进度{{ parseInt(item.progress) }}%</text
								>
								<view
									class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
									:style="{ background: '#F2F0F3' }"
								>
									<view
										class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
										:style="{ background: '#48C855', width: parseInt(item.progress) + '%' }"
									></view>
								</view>
							</view>

							<view class="w-[153rpx] flex flex-col items-start justify-center" v-else>
								<text class="text-[#F1BF10] text-[21rpx]">学习进度100%</text>
								<view
									class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
									:style="{ background: '#F2F0F3' }"
								>
									<view
										class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
										:style="{ background: '#F1BF10', width: 100 + '%' }"
									></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				class="w-[100%] completionStatusBox"
				style="float: left"
				v-for="(item1, index1) in item.paper_info"
			>
				<!-- <text class="text-[24rpx] text-[#303030] w-[100%]" style="float: left"
					>2023.12.4 14:13</text
				> -->
				<text
					class="text-[28rpx] font-bold text-[#303030] w-[100%] mt-[10rpx]"
					style="float: left"
					>{{ item1.name }}</text
				>
				<view class="w-[100%] mt-[10rpx] text-left" style="float: left">
					<image
						class="w-[40rpx] h-[40rpx] mr-[10rpx]"
						v-for="(item2, index2) in [0, 1, 2, 3, 4]"
						:src="item2 < item1.star ? `${baseImg}/gdjh_lx.png` : ``"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';
import { getStudentReadInfoAPI } from '@/service/plan';
import { initializeApp } from '@/utils';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};
const query = ref(null);

const title = ref('');
const studentReadInfo = ref();
const studyBookList = ref([]);
const getStudentReadInfo = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getStudentReadInfoAPI({
			student_id: query.value.student_id,
			plan_id: query.value.plan_id,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			studentReadInfo.value = res.data;
			if (studentReadInfo.value.list.length > 0) {
				console.log('studentReadInfo=>', studentReadInfo.value);
				const arrayFromObj = Object.values(studentReadInfo.value.list[0]);

				studyBookList.value = arrayFromObj;
				console.log('studyBookList=>', arrayFromObj, studyBookList.value);
			}
		} else {
			studentReadInfo.value = null;
			title.value = res.message;
		}
	} catch (error) {
		studentReadInfo.value = null;
		uni.hideLoading();
		title.value = '暂无数据';
	}
};
onLoad(options => {
	if (options) {
		query.value = options;
	}
});

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	initializeApp(getStudentReadInfo());
});
</script>
<style lang="scss">
page {
	background-color: #f6f7f9;

	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.planTitle {
	display: block;
	width: 100%;
	overflow: hidden;
	float: left;
}
.planTitleTex {
	width: auto;
	float: left;
	max-width: calc(100% - 120rpx);
	overflow: hidden;
	line-height: 63rpx;
	display: block;
	height: 63rpx;
	background: #eaebed;
	border-radius: 31rpx;
	font-size: 28rpx;
	color: #474747;
	margin: 0 0 18rpx 35rpx;
	padding: 0 30rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.block-4 {
	display: block;
	height: auto;
	padding: 30rpx 0;
	margin: 30rpx 25rpx 34rpx 25rpx;
	box-sizing: border-box;
	background-color: #fdffff;
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx rgb(0 0 0 / 7%);

	.staudenDetails_topLeftBox {
		width: 100%;

		.caption-7 {
			width: calc(100% - 22rpx);
			margin-left: 22rpx;
			overflow: hidden;
			font-size: 36rpx;
			font-style: normal;
			line-height: 54rpx;
			color: rgb(48 48 48 / 100%);
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.staudenDetails_topRightBox_image {
			float: right;
			width: 60rpx;
			height: 60rpx;
			margin-top: 30rpx;
			margin-right: 30rpx;
		}

		.title-6 {
			width: calc(100% - 105rpx);
			margin-top: 10rpx;
			margin-left: 22rpx;
			overflow: hidden;
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.title-7 {
			float: left;
			height: 50rpx;
			padding: 0 20rpx;
			font-size: 25rpx;
			font-style: normal;
			line-height: 50rpx;
			color: #fff;
			background-color: #2ba5e0;
			border-radius: 10rpx;
		}

		.title-8 {
			float: left;
			margin-left: 10rpx;
			font-size: 28rpx;
			font-style: normal;
			line-height: 50rpx;
			color: #909090;
		}
	}

	.beiyueDetailsBox {
		width: calc(100% - 44rpx);
		margin: 0 22rpx;
		border-radius: 10rpx;
	}
}

.completionStatusBox {
	width: calc(100% - 44rpx);
	padding: 28rpx 22rpx;
	margin: 22rpx 0 0;
	background-color: #f3f3f5;
	border-radius: 10rpx;
}

.wrapper-4 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 110rpx;
	height: 110rpx;
	padding: 0;
	overflow: hidden;
	background-color: #2ba5df;
	border-radius: 110rpx;
}

.wrapper-5 {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 110rpx;
	height: 110rpx;
	padding: 0;
	overflow: hidden;
	background-color: #fccb26;
	border-radius: 110rpx;
}

.title-5 {
	align-self: center;
	margin-top: 20rpx;
	overflow: hidden;
	font-size: 24rpx;
	font-style: normal;
	font-weight: bold;
	line-height: 40rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption-2 {
	align-self: center;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 25rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
